import React, { Component } from 'react';
import './style.css'
// 使用组件方式
import ReactEcharts from 'echarts-for-react';
import 'echarts-wordcloud'
import request from '../../request';
import { Redirect } from 'react-router-dom';
import { Spin } from 'antd';

interface CourseItem {
  index?: number;
  name?: string;
  url?: string | undefined;
  num?: string;
  price?: number;
  chg?: number;
}

interface DataStructure {
  [key: string]: CourseItem[];
}

interface State {
  loading: boolean;
  isLogin: boolean;
  data: DataStructure;
}

class Word extends Component{
  state:State = {
    loading: true,
    isLogin: true,
    data: {}
  }
  componentDidMount() {
    request.get('/api/isLogin').then(res => {
      const data: boolean = res.data;
      if (!data) {
        this.setState({
          isLogin: false,
          loading: false
        });
      } else {
        this.setState({
          loading: false
        });
      }
    });
    request.get('/api/showWenCaiYg').then(res => {
      const data = res.data;
      if (data) {
        this.setState({ data });
      }
    });

  }

  getOption:any = ()=> {
    const { data } = this.state;
    const arr:CourseItem[] = []
    for(let i in data) {
      const infoArr = data[i]
      infoArr.forEach(item => {
        const obj:any = {}
        obj.name = item.name
        obj.value = item.chg
        obj.price = item.price
        obj.num = item.num
        arr.push(obj)
      })
    }
    console.log(arr)
    const option = {
      backgroundColor: '#000',
      tooltip: {
        show: true,
        position: 'top',
        trigger: 'item',
        padding: [10, 15],
        textStyle: {
          fontSize: 14
        },
        formatter: (params:any) => {
          const { name, value, num, price } = params
          return `
            名称：${name} <br/>
            代码：${num}} <br/>
            涨幅：${value} <br/>
            涨幅：${price} 
          `
        }
      },
      series: [{
        type: "wordCloud",
        // 网格大小，各项之间间距
        gridSize: 5,
        // 形状 circle 圆，cardioid  心， diamond 菱形，
        // triangle-forward 、triangle 三角，star五角星
        shape: 'circle',
        // 字体大小范围
        sizeRange: [20, 60],
        // 文字旋转角度范围
        rotationRange: [-45, 0, 45, 90],
        // 旋转步值
        rotationStep: 45,
        // 自定义图形
        // maskImage: maskImage,
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        // 画布宽
        width: '100%',
        // 画布高
        height: '100%',
        //自定义图
        //   maskImage: maskImage,
        // 是否渲染超出画布的文字
        drawOutOfBound: false,
        textStyle: {
          normal: {
            color: function(params:any) {
              return 'rgb(' + [
                Math.round(Math.random() * 200 + 55),
                Math.round(Math.random() * 200 + 55),
                Math.round(Math.random() * 200 + 55)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#2ac'
          }
        },
        data: arr
      }]
    };
    return option
  };

  render() {
    const { isLogin, loading } = this.state
    if(isLogin) {
      return (
        <Spin spinning={loading}>
          <div className="word-wraper">
            <div className="word-wrapper-word">
              <ReactEcharts option={this.getOption()} />
            </div>
          </div>
        </Spin>
      )
    }else {
      return <Redirect to="login" />;
    }
  }
}

export default Word
